<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Settings - Task Tracker</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" type="image/png" href="icon/icon32.png">
  <link rel="icon" sizes="16x16" href="icon/icon16.png">
  <link rel="icon" sizes="32x32" href="icon/icon32.png">
  <link rel="icon" sizes="48x48" href="icon/icon48.png">
  <link rel="icon" sizes="128x128" href="icon/icon128.png">
  <link rel="stylesheet" href="timer-float.css">
</head>
<body>
  <!-- Notification Element -->
  <div id="notification" class="notification success">
    <p id="notification-message" class="notification-message"></p>
  </div>
  
  <div class="container">
    <header>
      <div class="logo">
        <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M24 4H6V17.3333V30.6667H24V44H42V30.6667V17.3333H24V4Z" fill="currentColor"></path>
        </svg>
        <h2>Task Tracker</h2>
      </div>
      <div id="main-nav"></div>
    </header>
    
    <div class="content">
      <div class="content-container">
        <div class="title-section">
          <div class="title-content">
            <p class="main-title">Settings</p>
            <p class="subtitle">Customize your Task Tracker experience</p>
          </div>
        </div>
        
        <!-- Data Management -->
        <div class="settings-section">
          <h2 class="section-title">Data Management</h2>
          <div class="setting-item">
            <div class="setting-label">
              <p class="setting-name">Export Data</p>
              <p class="setting-description">Download your task data as JSON file</p>
            </div>
            <div class="setting-control">
              <button id="export-data-btn" class="action-button">
                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                  <polyline points="7 10 12 15 17 10"></polyline>
                  <line x1="12" y1="15" x2="12" y2="3"></line>
                </svg>
                <span>Export Data</span>
              </button>
            </div>
          </div>
          
          <div class="setting-item">
            <div class="setting-label">
              <p class="setting-name">Import Data</p>
              <p class="setting-description">Import tasks from a JSON file</p>
            </div>
            <div class="setting-control">
              <label for="import-data-input" class="action-button">
                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                  <polyline points="17 8 12 3 7 8"></polyline>
                  <line x1="12" y1="3" x2="12" y2="15"></line>
                </svg>
                <span>Import Data</span>
              </label>
              <input id="import-data-input" type="file" accept=".json" style="display: none;">
            </div>
          </div>
          
          <div class="setting-item">
            <div class="setting-label">
              <p class="setting-name">Clear Data</p>
              <p class="setting-description">Delete all your task data</p>
            </div>
            <div class="setting-control">
              <button id="clear-data-btn" class="action-button danger-action">
                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <polyline points="3 6 5 6 21 6"></polyline>
                  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                </svg>
                <span>Clear All Data</span>
              </button>
            </div>
          </div>
          <div class="setting-item">
            <div class="setting-label">
              <p class="setting-name">Show Floating Timer</p>
              <p class="setting-description">Display the floating timer widget when tasks are running</p>
            </div>
            <div class="setting-control">
              <label class="toggle-switch">
                <input type="checkbox" id="show-floating-timer-toggle" checked>
                <span class="toggle-slider"></span>
              </label>
            </div>
          </div>
        </div>
        
        <!-- Sync Settings -->
        <div class="settings-section">
          <h2 class="section-title">Sync Settings</h2>
          <div class="setting-item">
            <div class="setting-label">
              <p class="setting-name">Cloud Sync</p>
              <p class="setting-description">Sync your tasks across devices</p>
            </div>
            <div class="setting-control">
              <label class="toggle-switch">
                <input type="checkbox" id="cloud-sync-toggle">
                <span class="toggle-slider"></span>
              </label>
            </div>
          </div>
          
          <div class="setting-item">
            <div class="setting-label">
              <p class="setting-name">Auto Sync Frequency</p>
              <p class="setting-description">How often to sync your data</p>
            </div>
            <div class="setting-control">
              <select id="sync-frequency" class="form-input">
                <option value="1min">Every 1 minute</option>
                <option value="1hour">Every 1 hour</option>
                <option value="3hour">Every 3 hours</option>
                <option value="9hour">Every 9 hours</option>
              </select>
            </div>
          </div>
          
          <div class="setting-item">
            <div class="setting-label">
              <p class="setting-name">Manual Sync</p>
              <p class="setting-description">Click to sync your data immediately</p>
            </div>
            <div class="setting-control">
              <button id="manual-sync-btn" class="action-button">
                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <polyline points="4 17 10 11 4 5"></polyline>
                  <line x1="12" y1="19" x2="20" y2="19"></line>
                </svg>
                <span>Manual Sync</span>
              </button>
            </div>
          </div>
          
          <!-- JSONBin Config -->
          <div class="setting-item">
            <div class="setting-label">
              <p class="setting-name">JSONBin Config</p>
              <p class="setting-description">Configure JSONBin for data synchronization</p>
            </div>
            <div class="setting-control">
              <button id="toggle-jsonbin-config" class="action-button">
                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                  <line x1="8" y1="12" x2="16" y2="12"></line>
                  <line x1="12" y1="8" x2="12" y2="16"></line>
                </svg>
                <span>Configure JSONBin</span>
              </button>
            </div>
          </div>
          
          <div id="jsonbin-config-panel" class="setting-panel" style="display: none;">
            <div class="setting-item">
              <div class="setting-label">
                <p class="setting-name">API Key</p>
                <p class="setting-description">Your JSONBin API key</p>
              </div>
              <div class="setting-control">
                <input type="password" id="jsonbin-api-key" class="form-input" placeholder="Enter your JSONBin API key">
              </div>
            </div>
            
            <div class="setting-item">
              <div class="setting-label">
                <p class="setting-name">Bin ID</p>
                <p class="setting-description">Your JSONBin storage ID</p>
              </div>
              <div class="setting-control">
                <input type="text" id="jsonbin-bin-id" class="form-input" placeholder="Enter your Bin ID">
              </div>
            </div>
            
            <div class="setting-item">
              <div class="setting-label">
                <p class="setting-name">Test Connection</p>
                <p class="setting-description">Verify your JSONBin configuration</p>
              </div>
              <div class="setting-control">
                <button id="test-jsonbin-connection" class="action-button">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                    <polyline points="22 4 12 14.01 9 11.01"></polyline>
                  </svg>
                  <span>Test Connection</span>
                </button>
              </div>
            </div>
          </div>

          <!-- Sync History -->
          <div class="setting-item">
            <div class="setting-label">
              <p class="setting-name">Sync History</p>
              <p class="setting-description">View recent synchronization records (keeping the latest 5 records)</p>
            </div>
            <div class="setting-control">
              <button id="toggle-sync-history" class="action-button">
                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <circle cx="12" cy="12" r="10"></circle>
                  <polyline points="12 6 12 12 16 14"></polyline>
                </svg>
                <span>View Sync History</span>
              </button>
            </div>
          </div>
          
          <div id="sync-history-panel" class="setting-panel" style="display: none;">
            <div class="sync-history-list">
              <div class="sync-history-empty">No sync history available</div>
              <div class="sync-history-item">
                <span class="sync-history-date">2025-05-26 20:45:35</span>
                <span class="sync-history-status success">Success</span>
                <span class="sync-history-details">Uploaded 34 items</span>
              </div>
              <div class="sync-history-item">
                <span class="sync-history-date">2023-06-14 09:45:11</span>
                <span class="sync-history-status success">Success</span>
                <span class="sync-history-details">Uploaded 2 items</span>
              </div>
              <div class="sync-history-item">
                <span class="sync-history-date">2023-06-13 18:12:45</span>
                <span class="sync-history-status error">Failed</span>
                <span class="sync-history-details">Network connection error</span>
              </div>
              <div class="sync-history-item">
                <span class="sync-history-date">2023-06-12 11:05:33</span>
                <span class="sync-history-status success">Success</span>
                <span class="sync-history-details">Uploaded 5 items</span>
              </div>
              <div class="sync-history-item">
                <span class="sync-history-date">2023-06-10 16:23:08</span>
                <span class="sync-history-status success">Success</span>
                <span class="sync-history-details">Uploaded 8 items</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- About -->
        <div class="settings-section">
          <h2 class="section-title">About</h2>
          <div class="about-content">
            <div class="app-info">
              <p class="app-version">Task Tracker v1.0</p>
              <p class="app-description">Track your daily tasks and time spent on activities</p>
            </div>
            <div class="developer-info">
              <p>Developed by: Task Tracker Team</p>
              <p>© 2023 All Rights Reserved</p>
            </div>
            <div class="action-links">
              <a href="#" id="feedback-link" class="text-link">Send Feedback</a>
              <a href="#" id="help-link" class="text-link">Help Guide</a>
              <a href="#" id="privacy-link" class="text-link">Privacy Policy</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Confirm Modal -->
  <div id="confirm-modal" class="modal">
    <div class="modal-content">
      <div class="modal-header">
        <h3 id="confirm-title">Confirm Action</h3>
        <button class="modal-close">&times;</button>
      </div>
      <div class="modal-body">
        <p id="confirm-message">Are you sure you want to proceed?</p>
      </div>
      <div class="modal-footer">
        <button id="confirm-action" class="button primary-button">
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="20 6 9 17 4 12"></polyline>
          </svg>
          <span>Confirm</span>
        </button>
        <button class="action-button modal-cancel">
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
          <span>Cancel</span>
        </button>
      </div>
    </div>
  </div>
  
  <script src="settings.js"></script>
  <script src="timer-float.js"></script>
  <script src="nav.js"></script>
</body>
</html> 